import React, { useState } from 'react';
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
    DownOutlined,
    SmileOutlined
} from '@ant-design/icons';
import { Breadcrumb, Layout, theme, Dropdown, Space } from 'antd';
import { Outlet, Link,useNavigate } from "react-router-dom"
import MyMenu from '../components/MyMenu';

const { Header, Content, Footer, Sider } = Layout;




const Home = () => {
    //控制Slider展开和关闭
    const [collapsed, setCollapsed] = useState(false);
    const navigate = useNavigate()
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const loginout = () => {
        console.log("loginout");
        localStorage.removeItem("token")
        localStorage.removeItem("userInfo")
        navigate("/login")
    }
    const updatePwd = () => {
        console.log("修改密码");
    }

    const items = [
        {
            key: '1',
            label: <span onClick={loginout}>退出登录</span>,
            icon: <FileOutlined></FileOutlined>
        },
        {
            key: '2',
            label: <span onClick={updatePwd}>修改密码</span>,
            icon: <SmileOutlined />,
        }
    ];

    return (
        <Layout
            style={{
                minHeight: '100vh',
            }}
        >
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className="demo-logo-vertical" style={{ padding: "15px", boxSizing: "border-box" }}>
                    <img width="170px" src="http://web.woniulab.com:8084/img/logo-250px.645f24b5.png" alt="" />
                </div>
                <MyMenu></MyMenu>
            </Sider>
            <Layout>
                <Header
                    style={{
                        padding: 0,
                        background: colorBgContainer,
                        display: "flex",
                        justifyContent: "flex-end"
                    }}
                >
                    <Dropdown
                        menu={{
                            items,
                        }}
                    >
                        <a onClick={(e) => e.preventDefault()}>
                            <Space>
                                欢迎【小美】登录
                                <DownOutlined />
                            </Space>
                        </a>
                    </Dropdown>
                </Header>
                
                <Content
                    style={{
                        margin: '0 16px',
                    }}
                >
                    <Breadcrumb
                        style={{
                            margin: '16px 0',
                        }}
                    >
                        <Breadcrumb.Item>User</Breadcrumb.Item>
                        <Breadcrumb.Item>Bill</Breadcrumb.Item>
                    </Breadcrumb>
                    <div
                        style={{
                            padding: 24,
                            minHeight: 360,
                            background: colorBgContainer,
                        }}
                    >
                        {/* 路由渲染出口 */}
                        <Outlet></Outlet>
                    </div>
                </Content>
                <Footer
                    style={{
                        textAlign: 'center',
                    }}
                >
                    Ant Design ©2023 Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};
export default Home;